<template>
	<div>
		<micro-app v-if="isChild" :name="microAppName" :url="microAppUrl" :baseroute="baseroute" :data="microAppData"
			@created="handleCreated" @beforemount="handleBeforeMount" @datachange='handleDataChange'
			@mounted="handleMounted" @unmount="handleUnmount" @error="handleError" inline  iframe />
		<router-view v-else></router-view>
		<!-- <router-view></router-view>
		<micro-app name='first-child' url='http://localhost:3001/' inline  iframe></micro-app> -->
	</div>
</template>

<script setup>
	import microApp from '@micro-zoe/micro-app'
	import { computed, ref,watch,watchEffect  } from 'vue'
	import { useRouter,useRoute } from 'vue-router'
	import {CHILD_PREFIX,microAppsConfig} from '@/micro/config.js'
	let isChild = ref(false) /**是否为子模块 */
	const router = useRouter();
	const route = useRoute();
	let { path } = router.currentRoute.value
	// 子应用名称
	let microAppName = ref('')
	// 子应用 URL
	let microAppUrl = ref('')
	// 基础路由
	let baseroute = ref('/')
	// 监听路由变化
	watch(() => route.path, // 监听 path 变化
	  (newPath, oldPath) => {
		// console.log('路由路径从', oldPath, '变为', newPath);
		let paths = newPath.split('/') /**判断是否为子模块，子模块有固定的前缀，在 micro/config 设置 */
		if(paths.length > 2 && paths[1] === CHILD_PREFIX){
			let obj = microAppsConfig.filter(item => item.name == paths[2])[0]
			microAppUrl.value = obj.url
			microAppName.value = obj.name
			baseroute.value = obj.baseroute
			isChild.value = true
			setTimeout(()=>{
				toRouter(obj.name,route.path)
			})
		}else{
			isChild.value = false
		}
	  }
	);
	let toRouter = (name,path)=>{
		// 不带域名的地址，控制子应用my-app跳转/page1
		microApp.router.push({name: name, path: path})
		// // 带域名的地址，控制子应用my-app跳转/page1
		// microApp.router.push({name: 'my-app', path: 'http://localhost:3000/page1'})
		// // 带查询参数，控制子应用my-app跳转/page1?id=9527
		// microApp.router.push({name: 'my-app', path: '/page1?id=9527'})
		// // 带hash，控制子应用my-app跳转/page1#hash
		// // 使用replace模式，等同于 router.replace({name: 'my-app', path: '/page1'})
		// microApp.router.push({name: 'my-app', path: '/page1', replace: true })
	}
	// 向子应用传递数据
	const microAppData = {
	  token: '12345',//localStorage.getItem('token'),
	  userInfo: '打算大苏打',//JSON.parse(localStorage.getItem('userInfo') || '{}')
	}
	// 生命周期
	const handleCreated = () => {
	  console.log('子应用创建')
	}
	 
	const handleBeforeMount = () => {
	  // console.log('子应用即将挂载')
	}
	 
	const handleMounted = () => {
		// microApp.addDataListener(dataListener)
		console.log('子应用已挂载')
	}
	 
	const handleUnmount = () => {
	  console.log('子应用卸载')
	  // 解绑监听函数
	  // microApp.removeDataListener(dataListener: (data: Object) => any)
	  
	  // 清空当前子应用的所有绑定函数(全局数据函数除外)
	  // microApp.clearDataListener()
	}
	let handleDataChange = (data)=>{
		// 数据在事件对象的detail.data字段中，子应用每次发送数据都会触发datachange
		console.log(data,'数据变化标记')
	}
	const handleError = () => {
	  console.log('子应用加载错误')
	}
	// 数据通信
	microApp.addDataListener("first-child", (data) => {
	  console.log('来自子应用my-app的数据', data)
	  return '返回值1'
	})
	microApp.addGlobalDataListener((data) => {
	  console.log('全局数据', data)
	
	  return '返回值1'
	})
</script>

<style>
</style>